<template>
<h1>菜单组件</h1>
  <el-menu mode="horizontal" @select="handleSelect"
           background-color="#4F8DFE" text-color="#fff">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">关于我们</el-menu-item>
    <el-menu-item index="3">新闻中心</el-menu-item>
    <el-menu-item index="4">联系我们</el-menu-item>
    <el-menu-item index="5">留言反馈</el-menu-item>
    <el-menu-item index="6">会员中心</el-menu-item>
    <el-sub-menu index="7">
      <template #title>设置</template>
      <el-menu-item index="7-1">修改密码</el-menu-item>
      <el-menu-item index="7-2">退出登录</el-menu-item>
      <el-menu-item index="7-3">修改头像</el-menu-item>
      <el-menu-item index="7-4">修改昵称</el-menu-item>
      <el-menu-item index="7-5">修改邮箱</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
}
</script>


<style scoped>

</style>